<!--
 * @Author: YSM
 * @Description: select选择器多选下拉框关闭
 * @Date: 2024-02-19 15:11:57
 * @LastEditTime: 2024-02-19 15:45:10
 * @FilePath: \shouxun-web-viewd:\work\my_web_knowledge\my_vue2_demo\src\views\CloseSelect\index.vue
-->
<template>
    <!-- filterable	是否可搜索	boolean	—	false -->
    <div>
        <el-form :model="form">
            <el-form-item label="多选下拉框" prop="selectArr">
                <el-select v-model="form.selectArr" placeholder="请选择所需数据" :filterable="disabledSelect" ref="selectRef"
                    @focus="selectData" clearable multiple>
                    <el-option v-for="(item, index) in selectOptions" :label="item.nickName" :value="item.id"
                        :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            disabledSelect: false,
            form: {},
            selectOptions: [],
        }
    },
    methods: {
        selectData() {
            this.$nextTick(() => {
                this.disabledSelect = false
                this.$refs.selectRef.blur();
            })
        }
    }
};
</script>
<style  lang='less' scoped></style>